<template>
<div>
  <van-nav-bar title="新用户注册" />
  <div>
    <van-image
        round
        width="6rem"
        height="6rem"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
  </div>
  <van-form>
    <van-cell-group inset>
      <van-field
          v-model="user.username"
          name="用户名"
          label="用户名"
          @change="checkName"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      >
        <template #button>
          <van-icon v-if="namemsg==0" name="success" color="green"/>
          <van-icon v-else name="cross" color="red"/>
        </template>
      </van-field>
      <van-field
          v-model="user.phone"
          name="手机号"
          @change="checkPhone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
      >
        <template #button>
          <van-icon v-if="phonemsg==0" name="success" color="green"/>
          <van-icon v-else name="cross" color="red"/>
        </template>
      </van-field>
      <van-field
          v-model="smscode"
          center
          clearable
          @change="checkCode"
          label="短信验证码"
          placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
        </template>
      </van-field>
      <van-field
          v-model="user.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="password2"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请再次输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="button" @click="add">
        注册新用户
      </van-button>
    </div>
  </van-form>
  <div style="color: #888888;font-size: 10px">
    <div style="float: left;margin-left: 20px">
      已有账号<router-link to="/login">点击注登录</router-link>
    </div>
    <div style="float: right;margin-right: 20px">
      忘记密码<router-link to="/find">点击找回</router-link>
    </div>
  </div>
</div>
</template>

<script setup>
import {ref} from 'vue'
import axios from 'axios'
const user=new ref({});

const password2=new ref("");
const smscode=new ref("")
const namemsg=new ref(1);
const phonemsg=new ref(1);
const checkName = () => {
  //校验用户名
  axios.get("user/checkname?name="+user.value.name).then(res=>{
    if(res.data.code==0){
      namemsg.value=0;
    }else {
      namemsg.value=1;
      alert(res.data.data);
    }
  })
}
const checkPhone = () => {
  //校验用户名
  axios.get("user/checkphone?phone="+user.value.phone).then(res=>{
    if(res.data.code==0){
      phonemsg.value=0;
    }else {
      phonemsg.value=1;
      alert(res.data.data);
    }
  })
}
const sendCode = () => {
  //发送验证码
  axios.get("sms/sendrcode?phone="+user.value.phone).then(res=>{
    if(res.data.code==0){
      alert("亲，验证码已发送，请检查手机！")
    }else {
      alert(res.data.data);
    }
  })
}
const checkCode = () => {
  //校验验证码
  var up={
    phone:user.value.phone,
    code:smscode.value
  }
  axios.post("sms/checkrcode",up).then(res=>{
    if(res.data.code==0){
      //校验
      alert("验证码校验成功")
    }else{
      alert(res.data.data);
    }
  })
}
const add=()=>{
  //注册 请求接口
  axios.post("user/register",user.value).then(res=>{
    if(res.data.code==0){
      //注册成功
      //跳转登录页面
    }else{
      alert(res.data.data);
    }
  })
}
</script>

<style scoped>

</style>
